<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设置我的资料</div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form" lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">我的角色</label>
                            <div class="layui-input-inline">
                                <select name="role" lay-verify="" disabled>
                                    {foreach $group as $key=>$vo}
                                    <option value="{$key}" {if condition="($admin.group_id eq $key)" }selected{
                                    /if}>{$vo | raw}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" value="{$admin.username ?? ''}" readonly
                                       class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickname" value="{$admin.nickname ?? ''}" lay-verify="nickname"
                                       autocomplete="off" placeholder="请输入昵称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline">
                                <input name="portrait" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址"
                                       value="{$admin.portrait ?? ''}" class="layui-input">
                            </div>
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="avartatPreview">查看图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mobile" value="{$admin.mobile ?? ''}" lay-verify="phone"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" value="{$admin.email ?? ''}" lay-verify="email"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">生日</label>
                            <div class="layui-input-inline">
                                <input type="text" name="birthday" required lay-verify="birthday"
                                       value="{$admin.birthday}"
                                       placeholder="请输入生日(比如:2-4)"
                                       autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">节点</label>
                            <div class="layui-input-inline">
                                {if $admin['lunar'] eq 1}
                                <input type="radio" name="lunar" value="0" title="阳历">
                                <input type="radio" name="lunar" value="1" title="农历" checked>
                                {else}
                                <input type="radio" name="lunar" value="0" title="阳历" checked>
                                <input type="radio" name="lunar" value="1" title="农历">
                                {/if}
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/admin/layui/layui.js"></script>

<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'form', 'upload'], function () {
        var $ = layui.$, form = layui.form, upload = layui.upload;
        upload.render({
            elem: '#LAY_avatarUpload'
            , url: "{:url('administration/upload')}"
            , auto: true //选择文件后不自动上传
            , bindAction: '#LAY_avatarUpload' //指向一个按钮触发上传
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    $('#LAY_avatarSrc').val('/storage/' + res.data.src)
                }
            }
        });
        form.on("submit(avartatPreview)", function (res) {
            var src = $('#LAY_avatarSrc').val();
            layer.photos({photos: {title: "查看头像", data: [{src}], shade: .01, closeBtn: 1, anim: 5}})
        })
        form.on("submit(setmyinfo)", function (res) {
            $.ajax({
                url: "{:url('user/info')}",
                data: res.field,
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    layer.load(2, {
                        shade: [0.6, '#fff'], content: '数据更新中...', success: function (layero) {
                            layero.find('.layui-layer-content').css({
                                'padding-top': '6px',
                                'width': '150px',
                                'padding-left': '40px'
                            });
                            layero.find('.layui-layer-ico16, .layui-layer-loading .layui-layer-loading2').css({
                                'width': '150px !important',
                                'background-position': '2px 0 !important'
                            });
                        }
                    });
                },
                success: function (info) {
                    if (info.code == 200) {
                        layer.closeAll();
                        layer.msg(info.msg, {icon: 1});
                        window.location.reload();
                    } else {
                        layer.msg(info.msg, {icon: 5});
                        return false;
                    }
                }
            });
        })

    });
</script>